<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE 9 ]><html class="ie9"><![endif]-->
    <head>
        <%@ include file="../frame_head.jsp" %>
            
        <!-- CSS -->
        <link href="${pageContext.request.contextPath }/css_b/bootstrap.min.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath }/css_b/animate.min.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath }/css_b/font-awesome.min.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath }/css_b/form.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath }/css_b/calendar.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath }/css_b/media-player.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath }/css_b/style.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath }/css_b/icons.css" rel="stylesheet">
        <link href="${pageContext.request.contextPath }/css_b/generics.css" rel="stylesheet"> 
    </head>
    <body id="skin-blur-violate">
        <!-- header -->
        <%@ include file="../frame_header.jsp" %>
        
        <section id="main" class="p-relative" role="main">
	        <!-- Sidebar -->
	        <%@ include file="../frame_aside.jsp" %>
          
            <!-- Content -->
            <section id="content" class="container">
		        <!-- Breadcrumb -->
				<ol class="breadcrumb hidden-xs">
				    <li><a href="#">主页</a></li>
				    <li class="active">数据</li>
				</ol>
				
				<h4 class="page-title">列表</h4>
                
                <!-- Deafult Table -->
                <div class="block-area" id="defaultStyle">
                    <h3 class="block-title">添加商品</h3>
                    <form id="userAction_save_do" name="Form1" action="${pageContext.request.contextPath}/adminProduct_save.action" method="post"  enctype="multipart/form-data">
                    <table class="table tile">
                    	<tr>
                    		<td>商品名称：</td>
                    		<td>
								<input type="text" style="color: black;"  name="pname" placeholder="请填入二级分类名称">
                    		</td>
                    		<td>
								所属的二级分类：
							</td>
							<td>
								<select  style="color: black;"  name="categorySecond.csid">
									<s:iterator var="cs" value="csList">
										<option value="<s:property value="#cs.csid"/>" ><s:property value="#cs.csname"/></option>
									</s:iterator>
								</select>
							</td>
                    	</tr>
						<tr>
							<td>
								商品市场价格：
							</td>
							<td>
								<input type="text" style="color: black;"  name="market_price"  placeholder="请填入商品市场价格">
							</td>
							<td>
								商品商城价格：
							</td>
							<td>
								<input type="text" style="color: black;"  name="shop_price" placeholder="请填入商品商城价格">
							</td>
						</tr>
						<tr>
							<td>
								是否热门：
							</td>
							<td>
								<select style="color: black;" name="is_hot">
									<option value="1">是</option>
									<option value="0">否</option>
								</select>
							</td>
								<td rowspan="4" colspan="2">
								<div id="preview">
								    <img id="imghead" border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								商品图片：
							</td>
							<td>
								<input type="file" style="color: black;"  name="upload" onchange="previewImage(this)">
							</td>
						</tr>
						<tr>
							<td>
								商品评价：
							</td>
							<td>
								<textarea rows="5" style="color: black;" cols="30" name="pdesc"></textarea>
							</td>
						</tr>
                    	<tr>
                    		<td colspan="2">
                    		<center>
			                	<button type="submit" id="userAction_save_do_submit" name="save" value="确定" class="btn btn-sm m-r-5">确定</button>
			                	<button type="reset" id="reset" name="reset" value="重置" class="btn btn-sm m-r-5">重置</button>
			                	<button type="button" id="back" name="back" value="返回" onclick="history.go(-1)" class="btn btn-sm m-r-5">返回</button>
                    		</center>
                    		</td>
                    	</tr>
                    </table>
                   </form>
                </div>
            </section>
            <br/><br/>
        </section>
        
        <!-- Javascript Libraries -->
        <!-- jQuery -->
        <script src="${pageContext.request.contextPath }/js/jquery.min.js"></script> <!-- jQuery Library -->
        
        <!-- Bootstrap -->
        <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
        
        <!-- UX -->
        <script src="${pageContext.request.contextPath }/js/scroll.min.js"></script> <!-- Custom Scrollbar -->
        
        <!-- Other -->
        <script src="${pageContext.request.contextPath }/js/calendar.min.js"></script> <!-- Calendar -->
        <script src="${pageContext.request.contextPath }/js/feeds.min.js"></script> <!-- News Feeds -->
        
        
        <!-- All JS functions -->
        <script src="${pageContext.request.contextPath }/js/functions.js"></script>
        
        <!-- 图片实时预览 JS -->
        <script type="text/javascript">
 
	 
	                //图片上传预览    IE是用了滤镜。
	        function previewImage(file)
	        {
	          var MAXWIDTH  = 260; 
	          var MAXHEIGHT = 180;
	          var div = document.getElementById('preview');
	          if (file.files && file.files[0])
	          {
	              div.innerHTML ='<img id=imghead>';
	              var img = document.getElementById('imghead');
	              img.onload = function(){
	                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
	                img.width  =  rect.width;
	                img.height =  rect.height;
	//                 img.style.marginLeft = rect.left+'px';
	                img.style.marginTop = rect.top+'px';
	              }
	              var reader = new FileReader();
	              reader.onload = function(evt){img.src = evt.target.result;}
	              reader.readAsDataURL(file.files[0]);
	          }
	          else //兼容IE
	          {
	            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
	            file.select();
	            var src = document.selection.createRange().text;
	            div.innerHTML = '<img id=imghead>';
	            var img = document.getElementById('imghead');
	            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
	            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
	            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
	            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
	          }
	        }
	        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
	            var param = {top:0, left:0, width:width, height:height};
	            if( width>maxWidth || height>maxHeight )
	            {
	                rateWidth = width / maxWidth;
	                rateHeight = height / maxHeight;
	                 
	                if( rateWidth > rateHeight )
	                {
	                    param.width =  maxWidth;
	                    param.height = Math.round(height / rateWidth);
	                }else
	                {
	                    param.width = Math.round(width / rateHeight);
	                    param.height = maxHeight;
	                }
	            }
	             
	            param.left = Math.round((maxWidth - param.width) / 2);
	            param.top = Math.round((maxHeight - param.height) / 2);
	            return param;
	        }
		</script>
    </body>
</html>